<template>
    <div class="login-wrap" v-if="loginShow" style="background:#f2f3f7;">
        <div class="ms-title"><Icon type="ios-leaf" />司法推广CMS</div>
        <img id="bg" src="/static/image/bg.png" :style="'left: ' + left + '%;'"/>
        <div class="ms-login">
            <Form :model="form" :rules="rules" ref="form">
                <h1>登录</h1>
                <FormItem prop="user">
                    <Input v-model="form.user" placeholder="请输入账号"></Input>
                </FormItem>
                <FormItem prop="pwd">
                    <Input type="password" placeholder="请输入密码" v-model="form.pwd" @keyup.enter.native="submitForm"></Input>
                </FormItem>
                <div class="login-btn">
                    <Button type="primary" @click="submitForm">登录</Button>
                </div>
            </Form>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                loginShow: false,
                left: 5,
                form: {
                    user: 'test',
                    pwd: '123456'
                },
                rules: {
                    user: [
                        { required: true, message: '请输入用户名', trigger: 'blur' }
                    ],
                    pwd: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ]
                }
            }
        },
        created(){
            //本地登录
            this.loginShow = true;
            if(window.outerWidth > 1700) {
                this.left = 20;
            }
        },
        methods: {
            //本地登录
            submitForm() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        this.$axios.post(pub.apiDomain + 'index/login', this.form).then(res => {
                            if(res.c == 0) {
                                //保存token、用户信息（包括权限节点）
                                pub.setCache('token', res.d.Authorization);
                                pub.setCache('admin', res.d);
                                pub.setCache('site', 1);
                                this.$router.push('/news');
                            }else{
                                this.$Message.error('登录失败');
                            }
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
        }
    }
</script>

<style scoped>
    .login-wrap{
        position: relative;
        width:100%;
        height:100%;
    }
    .ms-title{
        position: fixed;
        top:0;
        width:100%;
        height: 60px;
        line-height: 60px;
        font-size:20px;
        color: #444;
        background: #fff;
        font-weight: bold;
        padding-left: 360px;
        padding-top: 3px;
    }
    .ms-title i{
        color:#409EFF;
        font-size: 30px;
        position: relative;
        right: 5px;
        top: -5px;
    }
    #bg{
        position: fixed;
        top: 20%;
    }
    h1{
        border-bottom: 1px solid #ddd;;
        padding-bottom: 6px;
        font-size: 20px;
        margin-bottom: 20px;
        color: #409EFF;
        font-weight: normal;
    }
    .ms-login{
        position: fixed;
        left:65%;
        top: 25%;
        width:400px;
        height:270px;
        padding:40px;
        border-radius: 5px;
        background: #fff;
    }
    .login-btn{
        text-align: center;
    }
    .login-btn button{
        width:100%;
        height:36px;
    }
</style>